<template>
    <div class="body">
        <el-container class="container">
            <el-main class="main">
                <h1 class="title" style="margin-top:10%;text-align: center">欢   迎   进   入   登   陆   界   面</h1>
                <hr style="width: 45%;margin-top: 2%">
                <el-form :model="loginForm" status-icon ref="ruleForm"
                         class="demo-ruleForm" style="align-content: center;padding-top:2%;width: 25%;margin: auto;position: absolute;left: 0;right: 0;">
                    <el-form-item style="align-items: center">
                        <el-input v-model="loginForm.username" placeholder="用户名" ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" v-model="loginForm.password" autocomplete="off" show-password
                                  placeholder="密码" style="left: 0;right: 0;"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()" style="width: 100%; color:wheat; font-size:15px;background-color: #222222;border: whitesmoke">提    交</el-button>
                    </el-form-item>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import {login} from "@/api/data";

    export default {
        name: "Login",
        data() {
            return {
                loginForm: {
                    username: null,
                    password: null,
                }
            }
        },
        methods: {
            submitForm() {
                if (this.$data.loginForm.username == null) alert("学号不能为空！");
                else if (this.$data.loginForm.password == null) alert("密码不能为空！");
                else {//执行login函数
                    login(this.$data.loginForm).then(res => {
                        if (res.accessToken == null) alert("登陆失败！用户名不存在或密码不正确")
                        else {
                            this.$router.push('/main')
                            this.$message({
                                type: "success",
                                message: '登陆成功'
                            })
                        }
                    })
                }
            }
        },

    }
</script>

<style lang="less" scoped>
  /*        设置内联样式表*/
  .body {
    height: 100%;
    width: 100%;
    background-image: url("/src/static/jp_background.png");
    background-size: cover;
    z-index: -1;
  }

  .container {
    width: 100%;
    height: 100%;
    background: rgba(34, 34, 34, 0.5);
    z-index: 0;
  }

  /deep/ .el-form-item__content {
    align-self: center;
  }

  .title{
    font-size: 40px;
    font-family: "隶书";
    font-weight: bold;
    color: wheat;
    letter-spacing: 0;
    text-shadow: 0 1px 0 #999,
    0 1px 0 #444,
    0 2px 0 #333,
    0 3px 0 #222,
    0 4px 0 #111}
</style>
